<template>
  <div class="wrap">
    <Header></Header>

    <div class="container">
      <div class="nav">
        <div class="img">
          <img :src="mnnu" alt="" title="mnnu" />
          <img :src="logo" alt="" width="150" title="cwk" />
        </div>
        <ul>
          <li @click="all"><a href="javascript:;">所有订单</a></li>
          <li @click="unfinish">
            <a href="javascript:;"
              >待收货<span style="color: red;">{{ quantity }}</span></a
            >
          </li>
        </ul>
      </div>

      <div class="t-head">
        <div class="t-item t-com">宝贝</div>
        <div class="t-price t-com">单价</div>
        <div class="t-quantity t-com">数量</div>
        <div class="t-total t-com">实付款</div>
        <div class="t-status t-com">交易状态</div>
        <div class="t-option t-com">交易操作</div>
      </div>
      <my-order-info v-for="item in renderOrders" :key="item._id" :orderData="item" @changeData="changeData"></my-order-info>
    </div>
  </div>
</template>

<script>
import Header from '@/components/base/header.vue'
import MyOrderInfo from '@/components/base/myOrderInfo.vue'
import mnnu from '@/assets/image/mnnu.png'
import logo from '@/assets/logo.png'
import { getOrder } from '@/api/index.js'
export default {
  components: {
    Header,
    MyOrderInfo
  },
  data() {
    return {
      mnnu,
      logo,
      allOrders: [],
      unfinishOrders: [],
      renderOrders: [],
      quantity: 0
    }
  },
  created() {
    const id = JSON.parse(localStorage.getItem('accessToken')).data
    this.getMyOrder('/api/home/getmyorders', { id })
  },
  methods: {
    async getMyOrder(url, params) {
      const { data } = await getOrder(url, params)
      this.allOrders = data
      this.renderOrders = this.allOrders
      this.filter(data)
    },
    all() {
      this.renderOrders = this.allOrders
    },
    unfinish() {
      this.renderOrders = this.unfinishOrders
    },
    changeData(id) {
      const index = this.allOrders.findIndex(item => item._id === id)
      this.allOrders[index].status = '是'
      this.filter(this.allOrders)
    },
    filter(arr) {
      this.unfinishOrders = arr.filter(item => {
        if (item.status === '否') {
          return item
        }
      })
      this.quantity = this.unfinishOrders.length
    }
  }
}
</script>

<style lang="less" scoped src="@/assets/css/myorder.less"></style>
<style scoped></style>
